/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div ref="card_content"
         class="block-switch-card_content">
        <div class="block-switch-card_row block-switch-card_top">
            <div class="block-switch-card_title  sfv-ellipsis"
                 :title="name">
                {{ name }}
                <span class="block-switch-card_count"></span>
            </div>
            <!-- <div class="block-swtich-card_count">
                {{ _showModelNum() }}
            </div> -->
            <div class="block-swtich-card_opr">
                <slot name="opr"
                      v-bind="data"></slot>
            </div>
        </div>
        <div class="block-switch-card_row">
            <div class="block-switch-card_time">
                <img src="../img/algorithm.png"
                     alt="">
                <span class="name"><lang>算法：</lang></span>
                <span class="count">{{ algNum }}个</span>
            </div>
        </div>
        <div class="block-switch-card_row">
            <div class="block-switch-card_time">
                <img src="../img/time.png"
                     alt="">
                <span class="name"><lang>最近更新时间：</lang></span>
                
                {{ updateTime }}
            </div>
        </div>
        <sf-layer
            default-target="card_content"
            trigger="hover"
            :default-width="300"
            :default-height="200">
            <slot name="tips"
                  v-bind="data"></slot>
        </sf-layer>
    </div>
</template>

<style lang="less">
.block-switch-card_content {
  width: 100%;
  padding: 0 7px;
}



.block-switch-card_row {
  line-height: 25px;
  font-size: 12px;
  &.block-switch-card_top{
      border-bottom: 1px solid #262D40;
        padding: 5px 0;
        margin-bottom: 3px;
  }
  .blue{
      color:#40A9FF ;
      font-size: 10px;
  }
  .name{
      width: 80px;
      display: inline-block;
  }
}



.block-switch-card_title {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  color: #C8D0E0;
 width: 190px;
  .block-switch-card_count{
      font-size: 10px;
      color: #5C5C5C;
  }
}

.block-switch-card_content:hover .block-switch-card_title {
  color: #fff;
}
.block-switch-card_content--active {
  background: #e8f0ff;
}


.block-swtich-card_count {
  display: inline-block;
  height: 16px;
  margin-left: 8px;
  color: rgba(255,255,255,0.50);
  line-height: 16px;
}

.block-switch-card_time   {
  font-size: 12px;
  color: rgba(255,255,255,0.50);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  img{
      width: 12px;
      height: 12px;
      vertical-align: middle;
      margin-top: -3px;
  } 
  .iconfont{
      font-size: 12px;
  }
}

.block-swtich-card_opr {
  float: right;
  line-height: 17px;
  font-size: 16px;
  cursor: pointer;
  width: 16px;
}
</style>

<script>

/**
 * Created by zhb on 2020/8/26.
 */

import { encodeDate } from 'src/util/format';
export default {
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        nameKey: {
            type: String,
            default: ''
        },
        versionKey: {
            type: String,
            default: ''
        },
        descriptionKey: {
            type: String,
            default: ''
        },
        algNumKey: {
            type: Number,
            default: 0
        }
    },

    computed: {
        name () {
            let { data, nameKey } = this;
            if (nameKey) {
                return data[nameKey];
            }
            return data.name;
        },
        version () {
            let { data, versionKey } = this;
            if (versionKey) {
                return data[versionKey];
            }
            return data.version;
        },
        updateTime () {
            let { data, desKey } = this;
            if (desKey) {
                return data[desKey];
            }
            return encodeDate(data.updateTime);
        },
        algNum () {
            let { data, algNumKey } = this;
            if (algNumKey) {
                return data[algNumKey];
            }
            return data.algNum;
        }
    },
    methods: {
        _showModelNum () {
            return _('（算法：{0}个）', this.algNum);
        }
    }
};
</script>
